<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h2>JavaScript 能做什么？</h2>
		
		<p>JavaScript 能够改变 HTML 属性值。</p>
		
		<p>在本例中，JavaScript 改变了图像的 src 属性值。</p>
		
		<!-- <button id="openBtn" onclick="document.getElementById('myImage').src='images/eg_bulbon.gif'">开灯</button> -->
		<button id="openBtn">开灯</button>
		
		<img id="myImage" border="0" src="images/eg_bulboff.gif" style="text-align:center;">
		<button id="closeBtn">关灯</button>
		<!-- <button id="closeBtn" onclick="document.getElementById('myImage').src='images/eg_bulboff.gif'">关灯</button> -->
	</body>
	<script type="text/javascript">
		// 如果在js中实现
		var openBtn = document.getElementById('openBtn');
		var closeBtn = document.getElementById('closeBtn');
		var myImage = document.getElementById('myImage');
		openBtn.onclick = function(){
			myImage.setAttribute('src','images/eg_bulbon.gif');
		}
		closeBtn.onclick = function(){
			myImage.setAttribute('src','images/eg_bulboff.gif');
		}
		
	</script>
</html>